<template>
	<view>
		<view class="example">
			<up-form ref="formRef" labelPosition="left" :model="dataFrom" :rules="rules" labelWidth="auto">
				<up-form-item label="旧密码" prop="oldPassword" borderBottom required>
					<up-input v-model="dataFrom.oldPassword" type="password" border="none"
						placeholder="请输入旧密码"></up-input>
				</up-form-item>
				<up-form-item label="新密码" prop="newPassword" borderBottom required>
					<up-input v-model="dataFrom.newPassword" type="password" border="none"
						placeholder="请输入新密码"></up-input>
				</up-form-item>
				<up-form-item label="确认密码" prop="confirmPassword" borderBottom required>
					<up-input v-model="dataFrom.confirmPassword" type="password" border="none"
						placeholder="请再次输入新密码"></up-input>
				</up-form-item>
				<up-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit()"></up-button>
			</up-form>
		</view>
	</view>

	<up-toast ref="toast"></up-toast>
</template>

<script lang="ts" setup>
	import { onLoad, onReady } from '@dcloudio/uni-app';
	import { getCurrentInstance, reactive, ref } from "vue";
	import { editUserPwd } from "@/api/system/user";
	import { pages } from '@/utils/page-url';

	const { proxy } = getCurrentInstance();

	const dataFrom = reactive({
		oldPassword: '',
		newPassword: '',
		confirmPassword: ''
	});

	const formRef = ref();
	const toast = ref();
	const rules = {
		oldPassword: [
			{
				type: 'string',
				required: true,
				message: '旧密码不能为空',
				trigger: ['blur', 'change']
			},
		],
		newPassword: [
			{
				type: 'string',
				required: true,
				message: '新密码不能为空',
				trigger: ['blur', 'change']
			}, {
				pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w!@#$%^&*()-+=]{6,}$/,
				// 正则检验前先将值转为字符串
				transform(value : any) {
					return String(value);
				},
				trigger: ['blur', 'change'],
				message: '新密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母'
			}
		],
		confirmPassword: [
			{
				type: 'string',
				required: true,
				message: '确认密码不能为空',
				trigger: ['blur', 'change']
			}, {
				pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w!@#$%^&*()-+=]{6,}$/,
				// 正则检验前先将值转为字符串
				transform(value : any) {
					return String(value);
				},
				message: '新密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母',
				trigger: ['blur', 'change']
			}, {
				// 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
				validator: (rule : any, value : any, callback : any) => {
					// 此处业务逻辑省略
					// 返回true表校验通过，返回false表示不通过
					return dataFrom.newPassword === dataFrom.confirmPassword;
				},
				message: '两次密码输入不一致',
				trigger: ['blur']
			}
		]
	}

	// 提交
	const submit = () => {
		formRef.value.validate().then(async (res : any) => {
			const param : any = {
				oldPassword: dataFrom.oldPassword,
				newPassword: dataFrom.newPassword
			}
			const { code, msg }:any = await editUserPwd(param);
			if (code === 200) {
				showToast();
			} else {
				toast.value.show({
					type: 'error',
					message: msg,
					duration: 1500,
					position: 'top'
				})
			}
		});
	}

	const showToast = () => {
		toast.value.show({
			type: 'loading',
			message: "正在加载",
			duration: 500,
			complete() {
				// @ts-ignore
				uni.$u.route({
					type: 'reLaunch',
					url: pages.login
				})
			}
		})
	}

	onLoad(() => {

	});

	onReady(() => {
		formRef.value.setRules(rules);
	});
</script>

<style lang="scss">
	.example {
		padding: 15px;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>